<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日概率模拟实验</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            line-height: 0.8; /* 适当压缩整体行距 */
        }

        h1 {
            color: #333;
            margin-bottom: 10px; /* 减小标题下方的间距 */
        }

        #grid-container {
            width: 90%;
            max-width: 1200px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px; /* 减小网格容器下方的间距 */
        }

        .month-row {
            display: flex;
            align-items: center;
            margin-bottom: 6.4px; /* 行距压缩为原来的80%，原来8px，现在6.4px */
        }

        .month-label {
            width: 50px;
            font-weight: bold;
        }

        .month-cells {
            display: flex;
            gap: 4px;
            flex-grow: 1;
        }

        .cell {
            width: 30px;
            height: 30px;
            background-color: #e0e0e0;
            border-radius: 4px;
            position: relative;
        }

        .date-cell {
            width: 30px;
            text-align: center;
            font-size: 12px;
        }

        .highlight {
            background-color: #ff4d4d;
        }

        .ball {
            width: 15px;
            height: 15px;
            background-color: #007BFF;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .controls {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .controls label {
            font-weight: 600;
        }

        .controls input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .controls button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .controls button:hover {
            background-color: #0056b3;
        }

        #result {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px; /* 减小结果显示下方的间距 */
        }
    </style>
    <audio id="repeatSound" src="https://www.soundjay.com/button/beep-07.wav" preload="auto"></audio>
</head>

<body>
    <h1>生日概率模拟实验</h1>
    <div id="grid-container">
        <!-- 这里动态生成月份和格子以及日期行 -->
    </div>
    <div id="result">
        有 0 天存在重复生日。-------------实验了 0 次，有 0 次出现了重复生日。
    </div>
    <div class="controls">
        <label for="ballCount">小球数量:</label>
        <input type="number" id="ballCount" value="54" min="1">
        <label for="fallSpeed">小球落下速度 (毫秒):</label>
        <input type="number" id="fallSpeed" value="100" min="10">
        <button id="startButton">开始模拟</button>
        <button id="clearButton">清空</button>
    </div>

    <script>
        const gridContainer = document.getElementById('grid-container');
        const ballCountInput = document.getElementById('ballCount');
        const fallSpeedInput = document.getElementById('fallSpeed');
        const startButton = document.getElementById('startButton');
        const clearButton = document.getElementById('clearButton');
        const resultDiv = document.getElementById('result');
        const repeatSound = document.getElementById('repeatSound');

        const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        let experimentCount = 0;
        let successCount = 0;

        // 生成日期行
        const dateRow = document.createElement('div');
        dateRow.classList.add('month-row');
        const emptyCell = document.createElement('div');
        emptyCell.classList.add('month-label');
        dateRow.appendChild(emptyCell);
        const dateCells = document.createElement('div');
        dateCells.classList.add('month-cells');
        for (let i = 1; i <= 31; i++) {
            const dateCell = document.createElement('div');
            dateCell.classList.add('date-cell');
            dateCell.textContent = i;
            dateCells.appendChild(dateCell);
        }
        dateRow.appendChild(dateCells);
        gridContainer.appendChild(dateRow);

        // 创建格子
        for (let month = 0; month < 12; month++) {
            const monthRow = document.createElement('div');
            monthRow.classList.add('month-row');

            const monthLabel = document.createElement('div');
            monthLabel.classList.add('month-label');
            monthLabel.textContent = `${month + 1}月`;
            monthRow.appendChild(monthLabel);

            const monthCells = document.createElement('div');
            monthCells.classList.add('month-cells');
            for (let day = 0; day < daysInMonth[month]; day++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                monthCells.appendChild(cell);
            }
            monthRow.appendChild(monthCells);
            gridContainer.appendChild(monthRow);
        }

        const cells = document.querySelectorAll('.cell');

        startButton.addEventListener('click', () => {
            experimentCount++;
            // 清空格子中的小球和高亮状态
            cells.forEach(cell => {
                while (cell.firstChild) {
                    cell.removeChild(cell.firstChild);
                }
                cell.classList.remove('highlight');
            });
            resultDiv.textContent = `有 0 天存在重复生日。-------------实验了 ${experimentCount} 次，有 ${successCount} 次出现了重复生日。`;

            const ballCount = parseInt(ballCountInput.value);
            const fallSpeed = parseInt(fallSpeedInput.value);
            let ballsDropped = 0;
            let repeatedDays = 0;
            let hasRepeat = false;

            const dropBall = () => {
                if (ballsDropped < ballCount) {
                    let cumulativeDays = 0;
                    const randomMonth = Math.floor(Math.random() * 12);
                    for (let i = 0; i < randomMonth; i++) {
                        cumulativeDays += daysInMonth[i];
                    }
                    const randomDay = Math.floor(Math.random() * daysInMonth[randomMonth]);
                    const randomIndex = cumulativeDays + randomDay;
                    const cell = cells[randomIndex];
                    const ball = document.createElement('div');
                    ball.classList.add('ball');
                    cell.appendChild(ball);

                    if (cell.childElementCount > 1) {
                        if (!cell.classList.contains('highlight')) {
                            repeatedDays++;
                            hasRepeat = true;
                            resultDiv.textContent = `有 ${repeatedDays} 天存在重复生日。-------------实验了 ${experimentCount} 次，有 ${successCount + (hasRepeat ? 1 : 0)} 次出现了重复生日。`;
                        }
                        cell.classList.add('highlight');
                        repeatSound.play();
                    }

                    ballsDropped++;
                    setTimeout(dropBall, fallSpeed);
                } else {
                    if (hasRepeat) {
                        successCount++;
                        resultDiv.textContent = `有 ${repeatedDays} 天存在重复生日。-------------实验了 ${experimentCount} 次，有 ${successCount} 次出现了重复生日。`;
                    }
                }
            };

            dropBall();
        });

        clearButton.addEventListener('click', () => {
            cells.forEach(cell => {
                while (cell.firstChild) {
                    cell.removeChild(cell.firstChild);
                }
                cell.classList.remove('highlight');
            });
            resultDiv.textContent = `有 0 天存在重复生日。-------------实验了 ${experimentCount} 次，有 ${successCount} 次出现了重复生日。`;
        });
    </script>
</body>

</html>    